<template>
  <div id="user">
    <el-card shadow="never" class="searchBar">
      <i class="el-icon-search"></i><span> 筛选搜索 </span>
      <el-button @click="resetInput" class="resetBtn">重置</el-button>
      <el-button @click="searchInput" class="searchBtn" type="primary"
        >查询搜索</el-button
      >
      <br />
      <el-input
        class="inputBar"
        placeholder="请输入用户名"
        prefix-icon="el-icon-search"
        v-model="inputValue"
      >
      </el-input>
    </el-card>
    <el-card class="dataBar" shadow="never">
      <i class="el-icon-document"></i><span> 数据列表 </span>
    </el-card>

    <el-table
      class="table"
      :data="users"
      style="width: 100%"
      :border="true"
      :max-height="800"
    >
      <el-table-column prop="id" label="编号" width="300"> </el-table-column>
      <el-table-column prop="username" label="用户名" width="300">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="300">
        <template slot-scope="scope">
          <el-button
            :type="scope.row.status == 1 ? 'primary' : 'danger'"
            plain
            >{{ scope.row.status == 1 ? "正常" : "禁用" }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="注册时间" width="300">
      </el-table-column>
      <el-table-column prop="update_time" label="最后修改时间" width="300">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEnable(scope.row)"
            >启用</el-button
          >
          <el-button size="mini" type="danger" @click="handleDisable(scope.row)"
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="total"
        :current-page.sync="pageData.page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "User",
  data() {
    return {
      inputValue: "",
      drawer: false,
      // 数据总条数
      total: 100,
      // 当前页码、单页数据数目
      pageData: {
        page: 10,
        limit: 8,
      },
    };
  },
  methods: {
    ...mapActions("User", ["getUsers", "saveUserStatus"]),
    resetInput() {
      this.inputValue = "";
    },
    searchInput() {
      if (this.inputValue !== "") {
        // ---------------------发送搜索请求-----------------
        console.log("searching");
      }
    },
    handleEnable(row) {
      if (row.status === 2) {
        this.saveUserStatus(row.id);
      }
    },
    handleDisable(row) {
      if (row.status === 1) {
        this.saveUserStatus(row.id);
      }
    },
    handleCurrentChange() {
      console.log(this.pageData.page);
    },
  },
  computed: {
    ...mapState("User", ["users"]),
  },
};
</script>

<style scoped lang="less">
@interval: 30px;
#user {
  position: relative;
  .searchBar {
    position: relative;
    margin-bottom: @interval;
    .el-button {
      position: absolute;
      top: 20%;
    }
    .resetBtn {
      right: 130px;
    }
    .searchBtn {
      right: 20px;
    }
    .inputBar {
      margin: 25px 0 8px 60px;
      width: 300px;
    }
  }

  .dataBar {
    position: relative;
    margin-bottom: @interval;
    .el-button {
      position: absolute;
      top: 20%;
      right: 20px;
    }
  }
  .table {
    margin-bottom: @interval;
    max-height: 870px;
  }
  .block {
    position: absolute;
    right: 20px;
  }
}
</style>